import React from 'react'
import Link from 'next/link'

import '../static/style/components/header.scss'

import {Row, Col, Menu} from 'antd'
import { home, user, StarTwoTone } from '@ant-design/icons';
const { SubMenu } = Menu;

const Header = () => (
  <div className="header">
    <Row type="flex" justify="center">
        <Col  xs={24} sm={24} md={10} lg={12} xl={10}>
            <span className="header-logo">Lbxin</span>
            <span className="header-txt">专注前端开发</span>
        </Col>

        <Col className="memu-div" xs={0} sm={0} md={14} lg={8} xl={6}>
            <Menu  mode="horizontal">
                <Menu.Item key="home">
                    {/* <Icon type="home" /> */}
                    <home />
                    <Link href={{pathname:'/'}}>
                        <a>
                           首页 
                        </a>
                    </Link>
                    
                </Menu.Item>
                <Menu.Item key="video">
                    {/* <Icon type="youtube" /> */}
                    <Link href={{pathname:'/video'}}>
                        <a>
                            视频 
                        </a>
                    </Link>
                </Menu.Item>
                <SubMenu
                  key="sub1"
                  title={
                    <span>
                      {/* <Icon type="user" /> */}
                      <user />
                      <span>文章管理</span>
                    </span>
                  }
                >
                  <Menu.Item key="3">添加文章</Menu.Item>
                  <Menu.Item key="4">文章列表</Menu.Item>
                </SubMenu>
            </Menu>
        </Col>
    </Row>
  </div>
)

export default Header
